<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content">申请售后服务</block></cu-custom>
		<view scroll-y="true" style="height: 100%;">
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding">
				<view class="flex">
					<view class="text-black text-df">服务类型</view>
				</view>
				<view class="flex align-center margin-top-sm">
					<text class="cu-btn text-sm margin-right" :class="active==index?'line-theme':'line-grey'" v-for="(item,index) in typeList" :key="index" @tap="handleTap(item.type)">
						{{item.name}}
					</text>
				</view>
			</view>
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding" v-if="ApplyAfterGoods.length>0">
				<view v-for="(item,index) in ApplyAfterGoods" :key="index">
					<view class="flex">
						<view class="cu-avatar radius goodsImg" :style="'background-image:url('+item.goods_image+');'"></view>
						<view class="content margin-left-sm" style="flex: 1;">
							<view class="text-df text-fw600" style="line-height:40upx;">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="margin-top-sm flex align-center jusity-between">
						<view>
							<text class="text-black text-sm">{{active===1?'退款':'退货'}}数量</text>
						</view>
						<view style="flex:1;"></view>
						<view>
							<view style="flex:1;display: flex;justify-content: flex-end;align-items: flex-end;">
								<!-- <view class="flex align-center" style="border-radius: 6rpx;overflow: hidden;">
									<view class="cart-stepper" @tap="minus()">
										<view class="sbtn cuIcon-move text-black"></view>
									</view>
									<view class="cart-stepper text-black">
										<text class="text-sm cartnum" style="" v-model="number">{{number}}</text>
									</view>
									<view class="cart-stepper" @tap="plus()">
										<view class="sbtn cuIcon-add text-black"></view>
									</view>
								</view> -->
								<view class="text-df">x {{item.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding">
				<view class="flex jusity-between align-center">
					<view class="text-black text-df" style="flex:1;">退款方式</view>
					<view class="text-999 text-sm">原路退回</view>
				</view>
			</view>
			<!-- <view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding" @tap="showModal" data-target="bottomModal">
				<view class="flex jusity-between align-center">
					<view class="text-black text-df" style="flex:1;">{{active===1?'退款':'退货'}}原因</view>
					<view class="flex align-center">
						<text class="text-sm">{{refundsContent}}</text>
						<text class="cuIcon-right text-black" style="font-size: 40rpx;"></text>
					</view>
				</view>
			</view> -->
			<view class="bg-white radius20 overHidden margin-top-sm margin-left-sm margin-right-sm padding" >
				<view class="flex jusity-between align-center">
					<view class="text-black text-df" style="flex:1;">申请原因</view>
				</view>
				<view class="padding margin-top-sm" style="min-height:300rpx;background-color: #F5F5F5;">
					<textarea maxlength="-1"  v-model="refundsContent" @input="textareaInput" placeholder="如您真的要放弃这款宝贝,请填写原因"></textarea>
				</view>
			</view>
			<view class="flex">
				<view class="cu-btn radius20 bg-theme lg" style="position:fixed;bottom:0;width: 100%;" @tap="refunds()">
					<text class="text-xl">提交</text>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal " :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog radius">
				<view class="cu-bar bg-white">
					<view class="action"></view>
					<view class="content text-df text-fw600">请选择{{active===1?'退款':'退货'}}原因</view>
					<view class="action text-333 cuIcon-close text-lg" style="font-size: 30rpx;" @tap="hideModal"></view>
				</view>
				<scroll-view scroll-y class="padding-xl bg-white" style="text-align: left;height: 40vh;">
					<!-- <view class="flex-direction">
						{{item.name}}
					</view> -->
					<view class="cu-list sm-border" v-for="(item,index) in refundsReasonList" :key="index" @tap="handleReason" :data-target="item.name">
						<view class="cu-item">
							<text class="text-333">{{item.name}}</text>
						</view>
					</view>	
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as AfterSale_API from '@/api/after-sale.js'
	let account_type = 'WEIXINPAY'
	export default {
		data() {
			return {
				active:1,
				typeList:[
					{name:"退货",type:"rejected"},
					{name:"退款",type:"refund"}
				],
				number:12,
				sn:'',
				params:{
					order_sn :'',
					refund_reason :''
				},
				refundsContent:'',
				modalName: null,
				refundsReasonList:[
					{name:'缺货少件'},
					{name:'不想要了'},
					{name:'商品降价'},
					{name:'发错货'},
					{name:'质量问题哦'},
					{name:'商品与页面描述不符'},
					{name:'商品损坏'},
					{name:'商品质量问题'},
					{name:'物流问题'},
					{name:'商品严重损坏'},
					{name:'协商退货'},
				],
				ApplyAfterGoods:uni.getStorageSync('goods_applyAfter'),
				
			};
		},
		onLoad(e) {
			if(e.sn){
				this.sn = e.sn
			}
		},
		methods:{
			handleTap(type){
				if(type === 'refund'){
					this.active = 1
				}
				// else{
				// 	this.active = 0
				// }
			},
			// confirm(){
			// 	if(this.active===1){
			// 		this.refunds()
			// 	}
			// },
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			textareaInput(e) {
				this.refundsContent = e.detail.value
			},
			handleReason(e){
				this.refundsContent = e.currentTarget.dataset.target
				this.hideModal()
			},
			refunds(){
				let data ={
					refundsContent:this.refundsContent,
				}
				let errMsg = '请填写正确的申请原因'
				let refundsRuler = [{
						name: 'refundsContent',
						required: true,
						type: 'lengthRange',
						errmsg: errMsg
					}
				];
				let storeMsg = this.$formValider.validate(data, refundsRuler);
				if (!storeMsg.isOk) {
					this.$formValider.showMsg(false, storeMsg.errmsg);
					return false;
				}
				let params={
					order_sn:this.sn,
					refund_reason:this.refundsContent,
					account_type:account_type
				}
				AfterSale_API.refunds(params).then(res =>{
					uni.showToast({
						icon:'success',
						title:'已提交',
						duration:1500,
						success() {
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1000)
						}
					})
					
				})
				// if(this.refundsContent!=''){
					
				// }else{
				// 	uni.showToast({
				// 		title:"请输入"+active===1?'退款':'退货' +"原因"
				// 	})
				// }
				
			}
		}
	}
</script>

<style lang="scss">
.goodsImg{
	width: 180upx;
	height: 180upx;
}
.cart-stepper{
	background: #f3f3f3;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	.cartnum{
		border-left: 5rpx solid #fff;
		border-right: 5rpx solid #fff;
		padding:10rpx 14rpx;
	}
	.sbtn{
		padding:10rpx 4rpx;
		color: #333;
	}
}	
/deep/.cu-btn {
	height: 50rpx;
	border-radius: 24rpx;
}
</style>
